<template>
    <div id="app4">
        <NavBar />
        <div class="home">
            <el-row>
                <el-col :span="24">
                    <div class="banner">
                        <div class="banner-content">
                            <h1>抗日战争历史</h1>
                            <p>铭记历史，缅怀先烈，珍爱和平</p>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <div class="content">
                <el-row>
                    <el-col :span="24" v-for="(route, index) in mainRoutes" :key="index">
                        <router-link :to="route.path" class="feature-card-link">
                            <el-card class="feature-card"
                                :class="{ 'slide-left': index % 2 === 0, 'slide-right': index % 2 === 1 }"
                                :style="{ backgroundImage: `url(${route.bgImage})` }" ref="cards">
                                <div class="card-content">
                                    <el-icon class="card-icon">
                                        <component :is="route.meta.icon" />
                                    </el-icon>
                                    <h3>{{ route.meta.title }}</h3>
                                    <p>{{ route.description }}</p>
                                </div>
                            </el-card>
                        </router-link>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { routes3 } from '@/router'
import NavBar from '@/modules/module3/module3-kangri/components/NavBar.vue'

// 定义卡片内容
const cardContents = {
    Home7:{
        description: '回到主页',
        bgImage: new URL('@/modules/module3/module3-kangri/assets/image/601.jpg', import.meta.url).href
    },
    Timeline: {
        description: '了解抗日战争的重要时间节点',
        bgImage: new URL('@/modules/module3/module3-kangri/assets/image/bg-timeline.jpg', import.meta.url).href
    },
    Heroes: {
        description: '缅怀为国捐躯的革命先烈',
        bgImage: new URL('@/modules/module3/module3-kangri/assets/image/bg-heroes.jpg', import.meta.url).href
    },
    Battles: {
        description: '回顾抗战期间的重大战役',
        bgImage: new URL('@/modules/module3/module3-kangri/assets/image/bg-battles.webp', import.meta.url).href
    },
    Gallery: {
        description: '查看珍贵的历史照片资料',
        bgImage: new URL('@/modules/module3/module3-kangri/assets/image/bg-gallery.png', import.meta.url).href
    }
}

// 过滤掉首页路由并添加额外信息
const mainRoutes = routes3.filter(route => route.path !== '/home3').map(route => ({
    ...route,
    description: cardContents[route.name].description,
    bgImage: cardContents[route.name].bgImage
}))

const cards = ref([])

// 初始化 Intersection Observer
onMounted(() => {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible')
                // 一旦显示就不再观察
                observer.unobserve(entry.target)
            }
        })
    }, {
        threshold: 0.2 // 当元素20%进入视口时触发
    })

    // 观察所有卡片
    const cardElements = document.querySelectorAll('.feature-card')
    cardElements.forEach(card => {
        observer.observe(card)
    })
})
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  background-color: #f5f7fa;
}

#app4 {
  min-height: 100vh;
  width: 100%;
  min-height: 100vh;
  width: 100%;
  background-image: url('@/modules/module3/module3-kangri/assets/image/bg-global.jpg'); /* 替换为你的背景图片路径 */
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* 使背景固定，不随滚动移动 */
}
.home {
    min-height: calc(100vh - 60px);
    width: 100%;
    padding: 0;
    margin: 0;
}

.banner {
    height: 100vh;
    width: 100%;
    background-image: url('../assets/image/bg-banner.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.banner-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
}

.banner-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.banner-content p {
    font-size: 1.5rem;
}

.content {
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 0;
}

.feature-card-link {
    display: flex;
    justify-content: center;
}

.feature-card-link:last-child {
    margin-bottom: 0;
}

.feature-card {
    height: 90vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    transition: all 0.8s ease-out;
    opacity: 0;
    transform: translateX(-200px);
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    margin: 20px 0;
    padding: 20px;
}

.feature-card.slide-right {
    transform: translateX(100px);
}

.feature-card.visible {
    opacity: 1;
    transform: translateX(0);
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;

    /* 渐变背景 */
    background: linear-gradient(to bottom,
            transparent,
            rgba(0, 0, 0, 0.5) 20%,
            rgba(0, 0, 0, 0.8));
    color: white;
    text-align: center;
    opacity: 1;
    transform: none;
}

.card-icon {
    font-size: 2.5em;
    margin-bottom: 15px;
}

.card-content h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.card-content p {
    font-size: 1.1rem;
}

.feature-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>